<template>
	<div>
		<div class="note" :style ="note">
			<div class="inform">
				<span>通知公告</span>
				<div class="menu" @click="Oclicks()">
					<img src="@as/img/zuzhi_wode_fl@2x.png" alt="">
					<span>分类</span>
				</div>
			</div>
		</div>
		<mu-load-more @load="load" :loading="loading">
			<Loading v-if="notMore" class="empty-text-wrap"/>
			<div class="list">
				<div class="bar" v-for="(item,index) in list" :key="index"  @click="notice_details(item)" :class="{'putong':item.nature==1,'zhongyao':item.nature==2,'jinji':item.nature==3}">
					<!-- 1普通通知 2重要通知 3紧急通知 -->
					<!--<img  v-if="item.nature == 1" class="bq" src="@as/img/zuzhi_wode_cheng@2x.png" alt="">-->
					<!--<img  v-if="item.nature == 2" class="bq" src="@as/img/zuzhi_wode_redtz@2x.png" alt=""> -->
					<!--<img  v-if="item.nature == 3" class="bq" src="@as/img/zuzhi_wode_zytz@2x.png" alt="">-->
					<div class="step1">
						<div class="time">
							<span>{{(item.create_time) | time}}</span>
						</div>
						<div class="title">
							<span>{{item.title}}</span>
						</div>
					</div>
					<div class="step2">
						<div class="lfx">
							<img src="@as/img/zuzhi_wode_bq@2x.png" alt="">
							<span>{{item.classname}}</span>
						</div>
						<div class="rf">
							<!-- 1普通通知 2重要通知 3紧急通知 -->
							<span v-if="item.nature == 1" class="txt1">普通通知</span>
							<span v-if="item.nature == 2" class="txt2">重要通知</span>
							<span v-if="item.nature == 3" class="txt3">紧急通知</span>
						</div>
					</div>
				</div>

			</div>
		</mu-load-more>
		<div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||list.length<7}">{{loaded}}</div>
		<!-- 分类弹窗 -->
		<mu-container class="mu-container" v-show="show3">
			<div>
				<div class="mu-transition-box mu-primary-color mu-inverse" >
					<div class="inform">
						<span>通知公告</span>
						<img src="@as/img/zuzhi_wode_del@2x.png" alt="" @click="vanishs">
					</div>
					<div class="cd">
						<div v-for="(item,index) in menuList" :key="index" @click="menuMsg(item.id)">
							<span>{{item.name}}</span>
						</div>
					</div>
				</div>
			</div>
		</mu-container>

	</div>
</template>

<script>
    import Loading from '@/components/emptyText.vue';
    export default {
        components: {
            Loading
        },
        data() {
            return {
                loaded:'加載更多...',
                notMore:false,
                loading:false,
                loadOver:false,
                p:1,
                page:10,
                to: false,
                show: false,
                org_type: 1,
                class_id: 0,
                show3: false,
                menuList: [],//筛选分类
                list: [],//通知公告列表
                note: {
                    backgroundImage: "url(" + require("@as/img/zuzhi_wode_bright@2x.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100%",
                },
            }
        },
        mounted() {
            this.$progress.done();
        },
        methods: {
            notice_details (item) {
                this.$router.push({ path: '../organization/notice_details' , query: item })
            },
            vanishs: function() {
                this.show3 = false;
            },
            Oclicks: function() {
                this.show3 = true;
            },
            menuMsg: function(id) {
                this.class_id = id;
                this.p=1;
                this.loadOver =false;
                this.notMore =false;
                this.loading =false;
                this.list=[];
                this.getClassify();
                this.vanishs();

            },
            // 分类列表
            async getFl () {
                let that = this;
                try {
                    let params = {
                        uid: JSON.parse(Cookies.get('user_71ydj')).id,
                    }
                    const url = `/app/workplan/index_class`
                    let res = await that.$http.post(url, params)
                    that.$progress.done()
                    if (res.code === 200) {
                        that.menuList = res.data
                    }
                } catch (e) {
                    console.log('​catch -> e', e)
                }
            },
            // 公告列表
            getClassify() {
                let that = this;
                // that.list=[];
                that.$http
                    .post("/app/workplan/index_app", {
                        uid: JSON.parse(Cookies.get('user_71ydj')).id,
                        p: that.p,
                        page: that.page,
                        class_id:that.class_id
                    })
                    .then(res => {
                        console.log(res.data)
						// console.log(Object.keys(res.data).length)
                        if (Object.keys(res.data).length>0&&res.data.data.length) {
                            that.list.push(...res.data.data);
                        }
                        this.loadOver = false;
                        if (this.p != 1) {
                            console.log(res.data);
                            if (Object.keys(res.data).length>0&&res.data.data.length) {
                            } else {
                                this.loadOver = true;
                                this.loading = false;
                                this.loaded = '没有更多数据了'
                                return false
                            }
                        } else {
                            // alert(Object.keys(res.data).length+'aaaaaa')
                            if(Object.keys(res.data).length>0){
                                console.log(111)
                                if (!res.data.data.length) {
                                    this.notMore = true;
                                    this.loadOver = false;
                                } else {
                                    if (res.data.data.length < 7 && res.data.data.length != 0) {
                                        this.loadOver = true;
                                        this.loaded = '没有更多数据了';
                                        this.notMore =false;
                                    }
                                }
                            }else{
                                this.notMore = true;
                                this.loadOver = false;
                            }

                        }


                        // console.log(res.data.data)
                        // if (res.data.data == undefined) {
                        //     that.loaded = "没有更多";
                        //     that.loading = true;
                        //     that.notMore = false;
                        //     return;
                        // }
                        // that.list=[];
                        // that.list.push(...res.data.data);
                        // if (res.data.data.length < 10) {
                        //     that.loaded = "没有更多了";
                        //     that.notMore = false;
                        //     return;
                        // }
                    });
            },
            load() {
                //因为load 触发多次 所以做分时节流
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        // this.initData(this.p,this.status);
                        this.getClassify(this.p)
                    }, 2000);
                }
                // if (this.notMore) {
                //     clearTimeout(this.method);
                //     this.method = setTimeout(() => {
                //         this.p = this.p + 1;
                //         this.getClassify();
                //     }, 500);
                // }
            },


        },
        created(){
            this.getClassify();
            this.getFl()
        }
    }
</script>

<style scoped lang="scss">
	.mu-transition-row {
		margin-top: 16px;
		min-height: 100px;
	}
	.mu-container{
		width:calc(100% + 17px);
		margin-left: -8.5px;
		margin-right: -8.5px;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 99999;
	}
	.mu-transition-box {
		background: #FFF;
		width: 100%;
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: all 1s ease-in 1s;
		.inform{
			width:100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 25px;
			span{
				font-size: 28px;
				color:#000;
				font-weight: bold;
			}
			img{
				width:14.5px;
				height:14.5px;
			}
		}
		.cd{
			width:100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-top: 32px;
			div{
				width:48%;
				height:30px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #f8f8f8;
				border-radius: 3px;
				margin-bottom: 10px;
				span{
					font-size: 12px;
					color:#666;
				}
			}
		}
	}
</style>
<style scoped lang="scss">
	// flex_between 两端对齐
	@mixin flex_between{
		isplay: flex;
		justify-content: space-between;
		align-items: center;
	}
	.note{
		padding: 38px 15px 15px 15px;
		box-sizing: border-box;
		width:100%;
		height:124px;
	}
	.inform{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 25px;
		span{
			font-size: 28px;
			color:#000;
			font-weight: bold;
		}
		.menu{
			width:55px;
			height:22.5px;
			background: #666;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			img{
				width:13.5px;
				height:12.5px;
			}
			span{
				font-size: 10px;
				color: #FFF;
				margin-left: 1px;
			}
		}
	}
	.list{
		width:100%;
		padding: 15px 15px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		.bar{
			width:100%;
			box-shadow: 0px 6px 15px 2px #f1f1f1;
			padding: 20px 20px;
			position: relative;
			margin-bottom: 15px;
			background: #fff;
			border-radius: 5px;
			position: relative;
			&:last-child{
				margin-bottom: 0;
			}
			&:after{
				position: absolute;
				content: '';
				width:4px;
				height:26px;

				border-radius:0px 6px 6px 0px;
				left: 0;
				top: 20px;
			}
			&.putong:after{
				background:rgba(255,173,25,1);
			}
			&.zhongyao:after{
				background:rgba(244,117,72,1);
			}
			&.jinji:after{
				background:rgba(235,77,68,1);
			}

			.bq{
				position: absolute;
				left:0;
				top:20px;
				width:4.5px;
				height:29px;
			}
			.step1{
				width:100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 14px;
				/*padding: 10px 0;*/
				box-sizing: border-box;
				margin-bottom: 16px;
				margin-top: 6px;
				.time{
					width:100%;
					display: flex;
					justify-content: flex-start;
					span{
						font-size: 12px;
						color: #999;
						display: inline-block;
					}
				}
				.title{
					width:100%;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					span{
						font-size: 14px;
						color: #333;
						display: inline-block;
					}
				}
			}
			.step2{
				width:100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 12px;
				.lfx{
					display: flex;
					align-items: center;
					img{
						width:17px;
						height:16.5px;
					}
					span{
						font-size: 12px;
						color:#ccc;
						margin-left: 3px;
					}
				}
				.rf .txt1{
					font-size: 12px;
					color: #ffad19;
				}
				.rf .txt2{
					font-size: 12px;
					color: #f47548;
				}
				.rf .txt3{
					font-size: 12px;
					color: #eb4d44;
				}
			}
		}

	}
	.empty-text-wrap {
		width: 100%;
		height: 40vh;
		margin-top: 20vh;
	}
	.loading {
		width: 100%;
		font-size: 14px;
		color: #dddddd;
		display: flex;
		align-items: center;
		justify-content: center;
		&.notPageOne {
			margin-top: -40px;
		}
	}
</style>